<template>
	<view>
		<u-popup :show="selfShow" 
			@close="onPopupClose"
			:overlay="true"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="true"
			mode="bottom" 
			round="40">
			<view class="popupContainer">
				<view class="content">
					<view class="item" @click="onSetNotePositon">
						<image class="icon" src="@/static/image/icon_note_positon.png" mode=""></image>
						位置栏
					</view>
					<view class="item" @click="onSetNoteSeek">
						<image class="icon" src="@/static/image/icon_note_seek.png" mode=""></image>
						预约咨询
					</view>
					<view class="item" @click="onDeleteNote">
						<image class="icon" src="@/static/image/icon_note_delete.png" mode=""></image>
						删除
					</view>
				</view>
				
				<view class="cancel" @click="onPopupClose">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	const Config = require("@/config.js")
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")

	let that = null
	export default {

		data() {
			return {
				selfShow: false,
			};
		},

		
		props: {
			value: {
				type: Boolean,
				default:false
			},
			noteObj:{
				type: Object,
				default:{}
			}
		},
		watch: {
		    value: {
		        handler: function observer(val) {
		            var that = this;
		            console.log("popupCard")
		            that.selfShow = val
		        },
		        immediate: true
		    }
		},
		methods: {
			//=====封面编辑
			onPopupOpen() {
				this.selfShow = true;
			},
			
			onPopupClose() {
				this.$emit('close');
				this.$emit('input', false)
			},
			onSetNotePositon(){
				if (this.noteObj.id){
					this.onPopupClose()
					var noteObj = JSON.stringify(this.noteObj)
					uni.navigateTo({
						url: `/pages/shop/note/noteMap?obj=${noteObj}`
					})
					// var location = JSON.parse(this.noteObj.location) 
					// if (location&&location.latitude&&location.longitude){
					// 	var lat = location.latitude
					// 	var lng = location.longitude
					// 	uni.navigateTo({
					// 		url: `/pages/shop/note/noteMap?id=${this.noteObj.id}&lat=${lat}&lng=${lng}`
					// 	})
					// }else{
					// 	uni.navigateTo({
					// 		url: `/pages/shop/note/noteMap?id=${this.noteObj.id}`
					// 	})
					// }
				}
				// console.log("onSetNotePositon")

			},
			onSetNoteSeek(){
				if (this.noteObj.id){
					this.onPopupClose()
					var noteObj = JSON.stringify(this.noteObj) 
					uni.navigateTo({
						url: `/pages/shop/note/noteSeek?obj=${noteObj}`
					})
				}
			},
			onDeleteNote(){
				let that = this
				this.$emit('close');
				this.$emit('input', false)
				uni.showModal({
				    title: '提示',
				    content: '确定当前笔记删除吗？',
					cancelText: "取消",
					confirmText: "确定",
				    success: function(res) {
				        if (res.confirm) {
							that.deleteNote()
				            console.log('用户点击确定');
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			
			deleteNote(){
				if (this.noteObj.id){
					api.getNoteDelete({
						param: {
							id: this.noteObj.id,
						}
					}).then(res=>{
						console.log("createNote", res)
						if (res.success){
							this.$emit("refresList")
							uni.showToast({
								icon:"none",
								title: "删除成功"
							})
						}
					}).finally(()=>{
						
					})	
				}			
			}
			
		}

	}
</script>

<style>
	page {
		background-color: #f3f3f3;
	}
</style>

<style lang="scss">

	.popupContainer {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx; 
		.content{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.item{
				width: 200rpx;
				padding: 10rpx 0;
				font-size: 20rpx;
				color: #666;
				display: flex;
				flex-direction: column;
				align-items: center;
				.icon{
					width: 74rpx;
					height: 74rpx;
					margin-bottom: 10rpx;
				}
			}
		
		}
		.cancel{
			width: 599rpx;
			height: 75rpx;
			background-color: #10d1ed;
			border-radius: 38rpx;
			margin-top: 20rpx;
			text-align: center;
			line-height: 75rpx;
			color: #fff;
			font-size: 30rpx;
		}
	}
</style>